<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>用户首页</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav1"></nav>
        <div class="ui grid container stackable">
            <!-- 左 -->
            <div class="eleven wide column">
                <div class="ui segment">
                    <!-- head -->
                    <head-card :num="total"></head-card>
                    <!-- body -->
                    <article-info v-for="article in articles" :article="article" :root="root">
                    </article-info>
                    <!-- 上下页 -->
                    <div class="ui two column grid">
                        <div class="column">
                            <a @click="get_list(pageNo-1)" :class="pageNo>0?'ui button':'ui button disabled'">上一页</a>
                        </div>
                        <div class="right aligned column">
                            <a @click="get_list(pageNo+1)"
                                :class="pageNo<maxpageNo?'ui button':'ui button disabled'">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右 -->
            <div class="five wide column">
                <!--分类-->
                <div class="ui segments">
                    <div class="ui  segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a th:href="@{/user/favorites}">more >></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment ">
                        <div class="ui fluid vertical menu">
                            <a href="#" class="item">人生经历
                                <div class="ui teal basic label">10</div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="ui segments">
                    <div class="ui  segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a th:href="@{/user/labels}">more >></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui teal segment">
                        <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">标签1</a>
                    </div>
                </div>
                <!--最新推荐-->
                <div class="ui segment">
                    <div class="ui  segment">
                        <i class="bookmark icon"></i>最新推荐
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-black m-text-thin">人生导师(my story)</a>
                    </div>
                </div>
                <!--二维码-->
                <div class="ui horizontal divider header teal m-text-thin">扫码</div>
                <div class="ui centered card" style="width: 13em;">
                    <iframe  frameborder="0" class="ui rounded image"
                    th:src="'https://api.pwmqr.com/qrcode/create/?url=http://localhost:8080'+@{/user/about}"></iframe>
                </div>
            </div>

        </div>
        <footer th:replace="/fragment/footer::f1"></footer>
    </div>

    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template th:replace="/fragment/template::ac"></template>
    <div th:replace="/fragment/template::head-card('博客','篇')"></div>
    <script>
        const ajax = {
            data() {
                return {
                    articles: [],
                    root: "[[@{/}]]",
                    total: 0,
                    pageNo: 0,
                    maxpageNo: 0
                }
            },
            methods: {
                get_list(x) {
                    if (x < 0 || x > this.maxpageNo) return;
                    this.pageNo = x;
                    var jsons = {
                        uid: "[[${session.uid}]]",
                        pageNo: x,
                        pageSize: 10
                    };
                    postJson('/blog/list', jsons, (r) => {
                        this.articles = r;
                    });
                }
            },
            mounted() {
                getJson('/blog/total/[[${session.uid}]]', (r) => {
                    this.total = r;
                    this.maxpageNo = parseInt(r / 10);
                }).then(() => {
                    this.get_list(0);
                });
            }
        }

        const app = Vue.createApp(ajax)

        app.component('article-info', {
            props: ['root', 'article'],
            template: '#ac'
        }).component('head-card', {
            props: ['num'],
            template: '#head-card'
        })

        app.mount('#app')
    </script>
</body>

</html>